<template>
  <transition>
    <div class="container">
      <mt-header fixed :title="article.title">
        <router-link :to="{name: 'notify'}" slot="left">
          <mt-button icon="back">返回</mt-button>
        </router-link>
      </mt-header>
      <div class="notify-info">
        <div class="title">
          <h1 v-text="article.title"></h1>
          <span v-text="article.publishTime">2018-02-27</span>
        </div>
        <div class="content">
          <div v-html="article.content"></div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
  import fetch from '../../utils/fetch'
  export default {
    data (){
      return{
        article:Object
      }
    },
    created (){
      this.handleGetArticle()
    },
    methods:{
      handleGetArticle() {
        fetch('/api/article/' + this.$route.params.articleId + '/info').then(response =>{
          if (response.data.success) {
            this.article = response.data.obj
          }
        })
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    position: relative;
    top:40px;
    .notify-info{
      .title{
        text-align: center;
        padding: 20px;
        h1{
          font-weight: 700;
          @include fz(7px)
        }
        span{
          @include fz(4px);
          color: #80848f;
        }
      }
      .content{
        padding: 20px;
        @include fz(6px)
      }
    }
  }
</style>
